/* 自定义 element 暗黑模式样式 */
html.dark {
  --vite-bg-color: #141414;
  --vite-main-bg-color: #0d0d0d;
  --vite-border-light: 1px solid #4c4c4d;

  // * wangEditor
  --w-e-toolbar-color: #595959;
  --w-e-toolbar-bg-color: #eeeeee;
  --w-e-textarea-bg-color: #141414;
  --w-e-textarea-color: #eeeeee;

  // * 以下为自定义暗黑模式内容
  // login
  .login-container {
    background-color: var(--el-fill-color-extra-light) !important;

    .login-box {
      background-color: var(--el-mask-color) !important;

      .login-form {
        background-color: var(--el-bg-color) !important;
        box-shadow: 5px 5px 15px rgb(161 161 161 / 20%) !important;

        .logo-text {
          color: var(--el-text-color-primary) !important;
        }
      }
    }
  }

  // scroll-bar
  ::-webkit-scrollbar {
    background-color: var(--el-scrollbar-bg-color) !important;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--el-border-color-darker) !important;
  }

  // layout
  .el-container {
    .el-aside {
      background-color: var(--vite-bg-color) !important;
      border-right: var(--vite-border-light) !important;

      .logo {
        border-bottom: var(--vite-border-light) !important;
      }
    }

    .not-aside {
      border-right: none !important;
    }

    .el-header {
      background-color: var(--vite-bg-color) !important;
      border-bottom-color: var(--el-border-color-light) !important;
    }

    .el-main {
      background-color: var(--vite-main-bg-color) !important;

      .card {
        background-color: var(--vite-bg-color) !important;
      }
    }

    .el-tabs {
      background-color: var(--vite-bg-color) !important;
    }

    .el-footer {
      .footer {
        background-color: var(--vite-bg-color) !important;
        border-top-color: var(--el-border-color-light) !important;

        a {
          color: var(--el-text-color-regular) !important;
        }
      }
    }
  }

  // menu
  .el-menu,
  .el-sub-menu,
  .el-menu-item,
  .el-sub-menu__title {
    background-color: var(--vite-bg-color) !important;

    &:not(.is-active) {
      color: #bdbdc0 !important;
    }

    &.is-active {
      color: #ffffff !important;
      background-color: #000000 !important;
    }
  }

  .el-menu-item:not(.is-active):hover {
    background-color: var(--vite-main-bg-color) !important;
  }

  .aside-split {
    background-color: var(--vite-bg-color) !important;
    border-right: var(--vite-border-light) !important;

    .logo {
      border-bottom: var(--vite-border-light) !important;
    }
  }

  // guide
  #driver-highlighted-element-stage {
    background-color: var(--el-color-info-light-5) !important;
  }
}
